使用Typora绘制图(表)

您所在的位置：网站首页 › Typora 图注 › 使用Typora绘制图(表)

使用Typora绘制图(表)

2024-07-14 16:12| 来源: 网络整理| 查看: 265

在学习语法之前, 不妨花一点时间阅读以下官方支持文档, 再决定学习本主题的范围和深度

(本篇文章中出现的译文均为笔者翻译或注释, 内容仅供参考)

Draw Diagrams With Markdown

August 15, 2016 by typora.io

Typora supports some Markdown extensions for diagrams, once they are enabled from preference panel.

When exporting as HTML, PDF, epub, docx, those rendered diagrams will also be included, but diagrams features are not supported when exporting markdown into other file formats in current version*. Besides, you should also notice that **diagrams is not supported by standard Markdown, CommonMark or GFM. **Therefore, we still recommend you to insert an image of these diagrams instead of write them in Markdown directly.

使用Typora绘制图(表)

August 15, 2016 by typora.io

Typora 可以支持一些Markdown的图表扩展(语法), 如果你在偏好设置中选择开启(支持性)

当导出为.html, .PDF, .epub, .docx时这些渲染的图(表)依然会被包括进来但是图(表)特性在当前(四年前的远古版本)版本中由Markdown导出到其他格式时不被支持. 另外🔔, 你也应该注意到图(表)并不被标准Markdown, CommonMark 或 GFM 所支持;

因此💡, 我们依然建议你选择插入图片而不是使用直接使用Markdown书写

那么接下来, 就是正文内容!🎉

正文目录:

序列图流程图 Mermaid(一个Markdown语法扩展, 但是在Typora可查的文档中仅支持以下的子列表中列出的特性) Mermaid序列图 Mermaid流程图 Mermaid甘特图 Mermaid类图 Mermaid状态图 Mermaid饼图特性总结个人小结

🔔: Typora绘制的图(表)中对于对象的数量的支持或许是有限的, 因此建议在规划事件或逻辑顺序前先对所需对象数量的支持性进行检查

序列图

This feature uses js-sequence, which turns the following code block into a rendered diagram:

这个特性是通过 js-sequence所实现的, 可以将以下代码转换为渲染图

```sequence Alice->Bob: Hello Bob, how are you? Note left of Alice: Alice thinks Note right of Alice: Alice thinks Note left of Bob: Bob thinks Note right of Bob: Bob thinks Bob-->Alice: I am good thanks! ```

🔔: 自己写的时候不要先打代码块, 直接写👆这个代码块里的内容就好

结果如下:

💡对象的数量并不局限于两个, 比如也可以写成👇这样; 但或许是有上限的, 因此还是建议在规划事件或逻辑顺序前先对所需对象数量的支持性进行检查

```sequence a-->b: a2b a-->c: a2c a-->d: a2d a-->e: a2e a-->f: a2f a-->g: a2g a-->h: a2h a-->i: a2i a-->j: a2j a-->k: a2k ```

特性表语法名称(功能) 方法(示例) -> : 事件线(直线): 事件对象a->对象b: 事件1 --> : 事件线(直线): 事件对象a-->对象b: 事件1 note left/right of : 备注 note left of 对象a: 备注1note right of 对象b: 备注2 流程图

This feature uses flowchart.js, which turns the following code block into a rendered diagram:

这个特性是通过 flowchart.js所实现的, 可以将以下代码转换为渲染图

```flow st=>start: Start op=>operation: Your Operation cond=>condition: Yes or No? e=>end st->op->cond cond(yes)->e cond(no)->op ```

🔔: 自己写的时候不要先打代码块, 直接写👆这个代码块里的内容就好

结果如下:

💡同样的, 对象的数量并不局限于两个, 但或许是有上限的, 因此还是建议在规划事件或逻辑顺序前先对所需对象数量的支持性进行检查

特性表语法名称(功能) 方法(示例) st=>start: 开始(声明): 显示文本 st=>start: 开始 op=>operation: 选项(声明): 显示文本 op=>operation: 行为 cond=>condition: 条件(声明): 显示文本 cond=>condition: 是/否? e=>end 结束(声明) e=>end -> 事件线(实线) st->op->condcond(yes)->econd(no)->op🔔cond()的参数似乎必须是"yes"和"no" Mermaid

Typora also has integration with mermaid, which supports sequence diagrams, flowcharts, Gantt charts, class and state diagrams, and pie charts.

Typora还集成了mermaid, 支持其中的序列图, 流程图, 甘特图, 类图, 状态图和饼图

Mermaid序列图

For more details see these instructions.

通过👉Mermaid序列图文档查看更多细节

```mermaid %% Example of sequence diagram sequenceDiagram Alice->>Bob: Hello Bob, how are you? alt is sick Bob->>Alice: Not so good :( else is well Bob->>Alice: Feeling fresh like a daisy end opt Extra response Bob->>Alice: Thanks for asking end ```

🔔: 自己写的时候不要先打代码块, 直接写👆这个代码块里的内容就好

特性表语法名称(功能) 方法(示例) sequenceDiagram 声明段首声明用 ->> : 事件线(实线) 对象a->>对象b:事件文本 alt 情况替换文本 alt 条件/情况 else (其他)情况替换文本 else 条件/情况 opt 选择性文本 opt 条件/情况 end 结束(声明) 段尾结束 %% 注释 Mermaid流程图

For more details see these instructions.

通过👉Mermaid流程图文档查看更多细节

语法

横向流程图

```mermaid graph LR id1[alt] -->id2(alt) id2 --> id3{alt} id3 -->|情况1| id4[结果1] id3 -->|情况2| id5[结果2] ```

🔔: 自己写的时候不要先打代码块, 直接写👆这个代码块里的内容就好

纵向流程图:

```mermaid graph TD id1[alt] -->id2(alt) id2 --> id3{alt} id3 -->|情况1| id4[结果1] id3 -->|情况2| id5[结果2] id3 -->|情况3| id6[结果3] ```

🔔: 自己写的时候不要先打代码块, 直接写👆这个代码块里的内容就好

特性表语法名称(功能) 方法(示例) graph LR/TD 声明横向制图用"LR"纵向制图用"TD" id[alt] 直角矩形 id[alt] id(alt) 圆角矩形 id(alt) id 菱形(结点) id --> 事件线(实线) 对象a-->对象b Mermaid甘特图

For more details see these instructions.

通过👉Mermaid甘特图文档查看更多细节

```mermaid %% Example with selection of syntaxes gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d section Critical tasks Completed task in the critical line :crit, done, 2014-01-06,24h Implement parser and jison :crit, done, after des1, 2d Create tests for parser :crit, active, 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :1d section Documentation Describe gantt syntax :active, a1, after des1, 3d Add gantt diagram to demo page :after a1 , 20h Add another diagram to demo page :doc1, after a1 , 48h section Last section Describe gantt syntax :after doc1, 3d Add gantt diagram to demo page : 20h Add another diagram to demo page : 48h ```

🔔: 自己写的时候不要先打代码块, 直接写👆这个代码块里的内容就好

特性表语法名称(功能) 方法(示例) gantt 类型声明段首声明 dateFormat 时间格式 dateformat: YYYY-MM-DDdatefomat: MM-DD-YYYYetc(更多的格式查看👉Mermaid甘特图文档) title 甘特图标题 title xx项目管理表 section 项目名称(分区) section 项目1 :done 完成(状态) 事件1 :done, ... :active 正在进行(状态) 事件1 :active, ... :crit critical, 关键任务事件1 :crit, ... des description, 任务描述(指针或者选择器) des, 关于"des"的补充

description, 个人认为应该理解为一个对事件时间节点的快速标记语法;

首先这种标记的基础和原理是甘特图本身就是"在时间轴上基于事件地描述整个项目流程", 因此每个项目的事件还可以用"某事件后多久"来进行定位(和描述), 这样一来, 许多事件可以很方便的"挂"在几个时间标记之后, 举个例子:

首先回顾一下这张图:

对于A section的定义, 其实就是定义了des1 - des4 四个重要时间点

section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task :des3, after des2, 5d Future task2 :des4, after des3, 5d

用画笔辅助理解起来就是👇这样的

这下就可以很清晰的理解:

"每个项目的事件还可以用某事件后多久来进行定位(和描述)"

了吧😜; 同理, 再回看其他分区的代码就可以发现其中很多的事件其实是使使用了A区几个事件时间的一种相对描述方法, 有点类似与使用变量存储一个属性来调控整体的方案, 至于利弊就看个人需求取舍啦😉

Mermaid类图

For more details see these instructions.

通过👉Mermaid类图文档查看更多细节

```mermaidclassDiagram Animal Crash Crash --> [*]```

🔔: 自己写的时候不要先打代码块, 直接写👆这个代码块里的内容就好

特性表语法名称(功能) 方法(示例) stateDiagram 声明段首声明 [*] 状态点 [*]-->对象a --> 连接线(实线) 对象a-->对象b(对象可以是状态点) Mermaid饼图

这里官方文档并没有给出更多, 但是Mermaid官方对于饼图的支持还是有的👉Mermaid饼图文档

```mermaidpie title Pie Chart "Dogs" : 386 "Cats" : 85 "Rats" : 150 ```

🔔: 自己写的时候不要先打代码块, 直接写👆这个代码块里的内容就好

语法名称(功能) 方法(示例) pie 声明段首声明 title 标题 title 标题x " " : 描述 "部分a": "部分b": "部分c": "部分d": 💡只需填入数量, 百分比是Mermaid自动求解的特性总结序列图语法名称(功能) 方法(示例) -> : 事件线(实线) 对象a -> 对象b : --> : 事件线(虚线) 对象a --> 对象b : note left/right of : 备注 note left of 对象a: note right of 对象b: 流程图语法名称(功能) 方法(示例) st=>start: 开始 st=>start: 开始 op=>operation: 选项 op=>operation: 行为 cond=>condition: 条件 cond=>condition: 是/否? e=>end 结束 -> 事件线(直线) st->op->condcond(yes)->econd(no)->op🔔cond()的参数似乎必须是"yes"和"no" Mermaid序列图语法名称(功能) 方法(示例) sequenceDiagram 声明段首声明用 ->> : 事件线(实线) 对象a-->对象b:事件文本 alt 情况替换文本 alt 条件/情况 else (其他)情况替换文本 else 条件/情况 opt 选择性文本 opt 条件/情况 end 结束(声明) 段尾结束 %% 注释 Mermaid流程图语法名称(功能) 方法(示例) graph LR/TD 声明横向制图用"LR"纵向制图用"TD" id[alt] 直角矩形 id[alt] id(alt) 圆角矩形 id(alt) id 菱形(结点) id --> 事件线(实线) 对象a-->对象b Mermaid甘特图语法名称(功能) 方法(示例) gantt 类型声明段首声明 dateFormat 时间格式 dateformat: YYYY-MM-DDdatefomat: MM-DD-YYYYetc(更多的格式查看👉Mermaid甘特图文档) title 甘特图标题 title xx项目管理表 section 项目名称(分区) section 项目1 :done 完成(状态) 事件1 :done, ... :active 正在进行(状态) 事件1 :active, ... :crit critical, 关键任务事件1 :crit, ... des description, 任务描述(指针或者选择器) des, Mermaid类图语法名称(功能) 方法(示例) classDiagram 声明段首声明连接线(实线) 对象a-->对象b(对象可以是状态点) Mermaid饼图语法名称(功能) 方法(示例) pie 声明段首声明 title 标题 title 标题x " " : 描述 "部分a": "部分b": "部分c": "部分d": 💡只需填入数量, 百分比是Mermaid自动求解的

【本文地址】

使用Typora绘制图(表)

使用Typora绘制图(表)

今日新闻

推荐新闻